<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>testAjax</title>
    <link rel="stylesheet" href="../layui/css/layui.css" media="all">
    <script type="text/javascript" src="../layui/layui.js"></script>
    <script type="text/javascript" src="../js/jquery-3.2.1.min.js"></script>
</head>
<body>
    <table class="layui-hide" id="formTest" lay-filter="formTest"></table>

    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>

    <script>
        layui.use(['table','layer'], function(){
            var table = layui.table
                ,layer = layui.layer;

            table.render({
                elem: '#formTest'
                ,url:'http://localhost:9999/get/QUE001121'
                ,toolbar: 'default' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
                ,title: '用户数据表'
                ,cols: [[
                    {field:'id', title:'id', width:80, fixed: 'left', unresize: true, sort: true}
                    ,{field:'car_id', title:'car_id', width:80, fixed: 'left', unresize: true, sort: true}
                    ,{field:'phone', title:'phone', width:120, edit: 'text'}
                    ,{field:'start_time', title:'start_time', width:200, edit: 'text'}
                    ,{field:'end_time', title:'end_time', width:200, edit: 'text'}
                    ,{field:'practice_notes', title:'practice_notes', sort: true}
                    ,{fixed: 'right', width: 165, align:'center', toolbar: '#barDemo'}
                ]]
                ,page: true
                ,response: {
                    statusCode: 200 //重新规定成功的状态码为 200，table 组件默认为 0
                }
                ,parseData: function(res){ //将原始数据解析成 table 组件所规定的数据
                    // console.log(res)
                    return {
                        "code": 200, //解析接口状态
                        "msg": res.message, //解析提示文本
                        "count": res.total, //解析数据长度
                        "data": res //解析数据列表
                    };
                }
            });

            //监听头工具栏事件
            table.on('toolbar(formTest)', function(obj){
                var checkStatus = table.checkStatus(obj.config.id)
                    ,data = checkStatus.data; //获取选中的数据
                switch(obj.event){
                    case 'add':
                        //添加功能
                        layer.open({
                            title: "添加"
                            ,type: 2
                            ,content: ['http://localhost:9999/test/formAdd','no']
                            ,area: ['800px','700px']
                            ,fixed: true
                            ,closeBtn: 2
                            ,id: 'testAdd'
                            ,isOutAnim: true
                        })
                        break;
                    case 'update':
                        if(data.length === 0){
                            layer.msg('请选择一行');
                        } else if(data.length > 1){
                            layer.msg('只能同时编辑一个');
                        } else {
                            layer.alert('编辑 [id]：'+ checkStatus.data[0].id);
                        }
                        break;
                    case 'delete':
                        if(data.length === 0){
                            layer.msg('请选择一行');
                        } else {
                            layer.msg('删除');
                        }
                        break;
                };
            });

            //监听行工具事件
            table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
                var data = obj.data //获得当前行数据
                    ,layEvent = obj.event; //获得 lay-event 对应的值
                if(layEvent === 'detail'){
                    layer.msg('查看操作');
                } else if(layEvent === 'del'){
                    layer.confirm('真的删除行么', function(index){
                        obj.del(); //删除对应行（tr）的DOM结构
                        layer.close(index);
                        //向服务端发送删除指令
                    });
                } else if(layEvent === 'edit'){
                    layer.msg('编辑操作');
                }
            });
        });
    </script>
</body>
</html>